<template>
    <div class="outer">
        <div class="list">
            <div class="img" @click="dialogVisible = true">
                <i class="el-icon-plus"></i>
                <span>添加常用专栏</span>
            </div>
        </div>
        <div class="list" v-for="(item, index) in list" :key="index" @click="goPage('/columnIndex', item.col_id)">
            <div class="img">
                <img :src="item.thumb" alt="">
            </div>
            <p class="line2"><b>【{{ item.title }}】</b>{{ item.intro }}</p>
            <div class="bom">
                <div class="y1">
                    ￥<span class="price">{{ item.price }}</span>
                    <span class="btn">购买</span>
                </div>
                <span class="collect">收藏 / 分享</span>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" :width="$store.getters.isMobile ? '90%' : '700px'">
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-picture-outline-round"></i>添加常用
            </span>
            <el-form ref="form" :model="form" label-width="6.25vw">

                <div class="select">
                    <el-form-item label="选择专栏:" required>
                        <el-select filterable v-model="col_id" placeholder="请选择专栏">
                            <el-option v-for="item in cols" :key="item.id" :label="item.title"
                                :value="item.id"></el-option>
                            <el-option disabled class="load-more" v-if="showMore1">
                                <span @click="loadc">加载更多...</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            dialogVisible: false,
            form: { type: '' },
            pageNum: 1,
            totalPage: 1,
            loading: false,
            user_id: 0,
            cols: [],
            col_id: '',

            totalPagec: 1,
            pageNumc: 1,
            loadingc: false,
            showMore1: false
        }
    },
    mounted() {
        let uid = this.$route.query.uid
        if (uid) {
            this.user_id = uid
            this.pageNum = 1
        }
        this.getList()
        this.getCols()
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件

    },
    computed: {
        keyword() {
            return this.$route.query.keyword
        },
    },
    watch: {
        keyword(n) {
            this.pageNum = 1
            this.getList()
        },
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    methods: {

        loadc() {
            var page = this.pageNumc
            //如果请求未结束就返回不连续请求
            if (this.loadingc) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPagec) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumc = page
            this.getCols()
        },

        goPage(url, id) {
            this.$router.push({
                path: url,
                query: {
                    id
                }
            })
        },
        getList() {
            this.loading = true
            let params = {
                page: this.pageNum,
                user_id: this.user_id,
                keyword: this.keyword
            }
            this.$api.getCy(params).then(res => {
                if (res.data.code == 1) {
                    if (this.keyword) {
                        this.list = []
                    }

                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.loading = false
                }

            })
        },
        // 绑定专栏列表
        // getCols() {
        //     this.$api.getCols().then(res => {
        //         console.log(res)
        //         if (res.data.code == 1) {
        //             this.cols = res.data.data
        //         }
        //     })
        // },

        // 绑定专栏列表
        getCols() {
            this.loadingc = true

            let params = {
                page: this.pageNumc,
            }
            this.$api.getCols(params).then(res => {
                if (res.data.code == 1) {
                    let response = res.data.data
                    this.totalPagec = response.last_page
                    if (this.totalPagec <= this.pageNumc) {
                        this.showMore1 = false
                    } else {
                        this.showMore1 = true
                    }
                    this.cols = this.cols.concat(response.data)
                    this.loadingc = false
                }
            })
        },

        load() {
            console.log('处理触底');
            var page = this.pageNum
            //如果请求未结束就返回不连续请求
            if (this.loading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPage) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNum = page
            this.getList()
        },
        onsubmit() {
            console.log(this.form);
            let params = {
                id: this.col_id
            }
            this.$api.addCy(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.pageNum = 1
                    this.list = []
                    this.getList()
                    this.$emit('getList')
                }
            })
        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.outer {
    display: flex;
    flex-wrap: wrap;
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}

.list {
    cursor: pointer;
    width: 330px;
    margin-right: 25px;
    margin-bottom: 80px;
    border-radius: 10px;
    overflow: hidden;

    &:nth-child(4n) {
        margin-right: 0;
    }

    .img {
        width: 330px;
        height: 331px;
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #E5E5E5;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden;

        img {
            width: 330px;
            height: 330px;
            object-fit: cover;
        }

        i {
            font-size: 100px;
            color: #999;
            border: 1px dashed #999;
            margin-bottom: 39px;
        }

        span {
            font-weight: 400;
            font-size: 24px;
            color: #666666;
        }
    }

    >p {
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        margin: 24px 0 20px;
    }

    .bom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .y1 {
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            display: flex;
            align-items: center;

            .price {
                font-size: 22px;
            }

            .btn {
                display: inline-block;
                width: 42px;
                height: 22px;
                text-align: center;
                line-height: 22px;
                background-color: #F9C541;
                margin-left: 17px;
            }
        }

        .collect {
            font-weight: 400;
            font-size: 16px;
            color: #999999;
        }
    }
}

@media screen and (max-width:768px) {
    .outer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 10px;
    }

    .list {
        width: 120px;

        .img {
            width: 120px;
            height: 120px;

            img {
                width: 100%;
                height: 100%;
            }

            i {
                font-size: 26px
            }

            span {
                font-size: 13px
            }
        }

        >p {
            font-size: 13px;
            margin: 0;
            padding:0 5px;
            border: 1px solid #e9e4e4;
            border-top: none;
            border-bottom: none;
        }

        .bom {
            padding: 5px;
            border: 1px solid #e9e4e4;
            border-top: none;

            border-radius: 0 0 5px 5px;
            .y1 {
                font-size: 12px;

                .price {
                    font-size: 13px
                }

                .btn {
                    width: 40px;
                    height: 15px;
                    font-size: 12px;
                    line-height: 15px;
                }

            }

            .collect {
                display: none;
            }

        }
    }
}
</style>